<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="考勤报表" name="first">
      <el-container>
        <el-aside width="300px">
          <!-- 组织树-->
          <check-report-tree
            :department="department"
            @handleCheckChange="handleCheckChange"
          >
          </check-report-tree>
        </el-aside>

        <el-container>
          <el-header class="tabletitle">
            <span>考勤报表数据</span>
            <div style="float: right">
              <el-date-picker
                v-model="time"
                type="daterange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
              >
              </el-date-picker>
              <el-button-group style="margin-left: 15px">
                <el-button
                  @click="getReport"
                  type="primary"
                  icon="el-icon-search"
                  >搜索
                </el-button>
                <el-button
                  @click="openexport"
                  type="success"
                  icon="el-icon-download"
                  >导出
                </el-button>

                <!-- <el-button
                  @click="synuserdata"
                  type="danger"
                  icon="el-icon-refresh"
                  >同步</el-button
                > -->
              </el-button-group>
            </div>
          </el-header>

          <check-report-table
          :tableData="tableData"
          :currentPage="currentPage"
          :totalCount="totalCount"
          :PageSize="PageSize"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></check-report-table>

         
        </el-container> </el-container
    ></el-tab-pane>
    <el-tab-pane label="考勤明细" name="second">
      <el-container>
        <el-header class="tabletitle">
          <span>考勤明细查询</span>

          <el-tag v-if="username!=''" type="success" style="margin-left:15px">{{ username}}</el-tag>
          <el-tag v-if="username!=''" style="margin-left:15px">{{ userdep}}</el-tag>
    
      

          <div style="float: right">
        
            <el-date-picker
              v-model="time"
              type="daterange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
            >
            </el-date-picker>

            <el-button-group style="margin-left: 15px">
              <el-button @click="getcheckdetail" type="primary" icon="el-icon-search"
                >查询
              </el-button>
              <el-button
                @click="$refs.syscheck.syscheck = true"
                type="success"
                icon="el-icon-search"
                >同步数据
              </el-button>
            </el-button-group>
          </div>

          <div  style="float: right;margin-right:15px">
            <remote-select-user ref="rsu"></remote-select-user>
          </div>
        </el-header>

        <check-detail-table
            :tableData="tableData1"
          ></check-detail-table>
      </el-container>

      <check-sys-pad ref="syscheck" :department="department"></check-sys-pad>
    </el-tab-pane>
    <!-- <el-tab-pane label="部门编制信息表" name="fourth">
        <formation-index :department="department"></formation-index>
      </el-tab-pane> -->

    <!-- <el-tab-pane label="储备人才库" name="five">
        <reserve-user-index></reserve-user-index>
      </el-tab-pane> -->
  </el-tabs>
</template>
  
  <style>
.tabletitle {
  max-height: 30px;
  font-size: 25px;
  color: #409eff;
}
.el-aside {
  color: #333;
  background-color: rgb(255, 255, 255);
}
</style>
  
  <script>
import arrayToTree from "array-to-tree";
import CheckReportTable from "./CheckReportTable.vue";
import CheckReportTree from "./CheckReportTree.vue";
import CheckSysPad from "./CheckSysPad.vue";
import CheckDetailTable from "./CheckDetailTable.vue";
import RemoteSelectUser from "../common/RemoteSelectUser.vue";

export default {
  components: {
    CheckReportTable,
    CheckReportTree,
    CheckSysPad,
    CheckDetailTable,
    RemoteSelectUser,
  },
  data() {
    return {
      username:"",
      userdep:"",
      activeName: "first",

      // table所需数据
      tableData: [], // 总数据
      currentPage: 1, // 默认显示第几页
      totalCount: 1, // 总条数，根据接口获取数据长度(不能为空)
      PageSize: 7, //每页展示条数

      // table所需数据
      tableData1: [], // 总数据

      //组织树所需数据
      department: [],
      selectdepartment: [],

      syndatareport: [],

      selecarr: [],
      time: [],

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  created() {
    // 获得部门信息
    this.getDepartment();
  },

  methods: {
    // 打开导出抽屉，同时给子组件的checkbox赋值
    openexport() {
      if (this.tableData && this.tableData.length > 0) {
        this.$refs.WorkUserDrawer.tableTitle = this.tablename;
        this.$refs.WorkUserDrawer.tableRange = this.tablename;
        this.$refs.WorkUserDrawer.drawerexport = true;
      } else {
        this.$message.error("你看看表里有数据吗？你让我导出啥？");
      }
    },

    // 树形组织点击触发
    handleCheckChange(selectobjp) {
      let selectobj = selectobjp;
      //  提取部门id
      selectobj.forEach((item) => {
        this.selecarr.push(item.id);
      });
    },

    // 打开页面时加载部门信息
    async getDepartment() {
      try {
        let res = await this.$axios.get(`api/member/getdepartment`);

        this.department = arrayToTree(res.data, {
          parentProperty: "pid",
          customID: "id",
        });
        this.selectdepartment = res.data;
      } catch (e) {}
    },

    //获得人员信息
    async getReport() {
      let datas = {
        selecarr: this.selecarr,
        stime: this.time[0],
        etime: this.time[1],
      };

      this.$axios
        .post("api/check/showcheckreport", datas)
        .then((response) => {
          this.tableData = response.data;
          this.totalCount = this.tableData.length;
          this.currentPage = 1;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async getcheckdetail() {
      let datas = {
        userid: this.$refs.rsu.userid,
        stime: this.time[0],
        etime: this.time[1],
      };
      this.$axios
        .post("api/check/showcheckdetail", datas)
        .then((response) => {
          this.tableData1 = response.data.table;
          this.username=response.data.username;
          this.userdep=response.data.userdep;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    openformation() {
      this.$refs.formation.formationshow = true;
    },

    openpost() {
      this.$refs.post.postshow = true;
    },

    // 页码跳转
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    handleSizeChange(val) {
      this.PageSize = val;
    },

  },
};
</script>
  